﻿<UserControl x:Class="InstantWatch.Controls.HighlightImage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:controls="clr-namespace:InstantWatch.Controls"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:conv="clr-namespace:InstantWatch"
             mc:Ignorable="d" 
             x:Name="thisControl"
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <Style TargetType="Image" x:Key="imgStyle">
            <Setter Property="Stretch" Value="Uniform" />
            <Setter Property="Source" Value="{Binding ElementName=thisControl, Path=ImageSource}" />
        </Style>
    </UserControl.Resources>
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="controls:HighlightImage.Highlighted">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="bottomGlow" 
                                                         Storyboard.TargetProperty="Opacity"
                                                         To="1" Duration="0:0:0.5" />
                    <DoubleAnimation Storyboard.TargetName="bottomGlow" 
                                                         Storyboard.TargetProperty="Opacity"
                                                         To=".90" Duration="0:0:0.25" BeginTime="0:0:0.5" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="controls:HighlightImage.Unhighlighted">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="bottomGlow" 
                                                         Storyboard.TargetProperty="Opacity"
                                                         To="0" Duration="0:0:0.25" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </UserControl.Triggers>
    <Grid Margin="10" >
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Ellipse x:Name="bottomGlow" Opacity="0" VerticalAlignment="Top" Grid.Row="1"
                                     Fill="White" Margin="0,-10,0,0" Height="20">
            <Ellipse.BitmapEffect>
                <BlurBitmapEffect Radius="5" KernelType="Gaussian" />
            </Ellipse.BitmapEffect>
        </Ellipse>
        <Rectangle x:Name="pictGlow" 
                   Width="{Binding ElementName=img, Path=ActualWidth, Converter={x:Static conv:MyCloneConverter.Instance}, ConverterParameter=40}"
                   Height="{Binding ElementName=img, Path=ActualHeight, Converter={x:Static conv:MyCloneConverter.Instance}, ConverterParameter=5}"
                   Opacity="{Binding ElementName=bottomGlow, Path=Opacity}" >
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStopCollection>
                        <GradientStop Color="Transparent" Offset="0" />
                        <GradientStop Color="White" Offset=".15" />
                        <GradientStop Color="White" Offset=".85" />
                        <GradientStop Color="Transparent" Offset="1" />
                    </GradientStopCollection>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Fill="Black"
            Width="{Binding ElementName=img, Path=ActualWidth, Converter={x:Static conv:MyCloneConverter.Instance}, ConverterParameter=5}"
            Height="{Binding ElementName=img, Path=ActualHeight, Converter={x:Static conv:MyCloneConverter.Instance}, ConverterParameter=5}"
            />
        <Rectangle Fill="White"
            Width="{Binding ElementName=img, Path=ActualWidth, Converter={x:Static conv:MyCloneConverter.Instance}, ConverterParameter=2.5}"
            Height="{Binding ElementName=img, Path=ActualHeight, Converter={x:Static conv:MyCloneConverter.Instance}, ConverterParameter=2.5}"
            />
        
        <Image x:Name="img" 
                   Width="{Binding ElementName=thisControl, Path=ImageWidth}"
                   Style="{StaticResource imgStyle}" />
    </Grid>
</UserControl>
